<template>
  <div>
    <div style="min-height: 400px">
      <el-steps :active="active" simple finish-status="success" class="u-m-b-20" align-center>
        <el-step title="应用信息" icon="el-icon-s-help" description="检查一下应用信息" />
        <el-step title="安装Sql" icon="el-icon-coin" description="获取并检查安装sql是否正确，可以自定义编辑" />
        <el-step title="更新Sql" icon="el-icon-coin" description="比较上一版本sql获取更新sql，并可以合并和编辑" />
        <el-step title="应用打包" icon="el-icon-coin" description="打包的基础配置" />
        <!--        <el-step title="应用下载" icon="el-icon-coin" description="请下载应用" />-->
      </el-steps>
      <!--检查应用信息-->
      <div v-if="active === 0">
        <el-descriptions v-if="version.addon" title="" :column="2" style="padding: 20px 0" border>
          <el-descriptions-item label="应用名称">{{ version.addon.title }}</el-descriptions-item>
          <el-descriptions-item label="应用作者">{{ version.addon.author }}</el-descriptions-item>
          <el-descriptions-item label="应用类型">
            <el-tag>{{ version.addon.type_name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="应用标识">
            <el-tag> {{ version.addon.name }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="应用版本">
            <el-tag type="danger"> {{ version.number }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="应用图标">
            <img :src="version.addon.icon" width="32" height="32" />
          </el-descriptions-item>
          <el-descriptions-item label="应用描述">{{ version.addon.desc }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div v-if="active === 1">
        <install-sql :vid="vid" @success="getVersionMsg(0)" />
        <!--        <div class="pack-sql">-->
        <!--          <div>-->
        <!--            <el-card shadow="hover" class="sql-install">-->
        <!--              <svg t="1673620670364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5562"><path d="M659.911111 102.4H204.8v394.24h52.337778v-341.333333h365.226666V367.502222h212.764445v501.76H257.137778V707.356444H204.8V921.6h682.666667V329.955556z m14.791111 212.764444V191.260444L798.606222 315.164444z" fill="#8D94E0" p-id="5563" /><path d="M136.533333 477.866667v250.311111h568.888889V477.866667z m177.720889 181.248a49.834667 49.834667 0 0 1-22.755555 19.114666 98.531556 98.531556 0 0 1-37.205334 6.257778 74.069333 74.069333 0 0 1-49.834666-15.018667A65.308444 65.308444 0 0 1 183.296 625.777778l34.133333-3.299556a40.504889 40.504889 0 0 0 12.288 24.917334 37.319111 37.319111 0 0 0 25.031111 7.850666 38.343111 38.343111 0 0 0 24.689778-6.712889 20.935111 20.935111 0 0 0 8.419556-16.497777 15.132444 15.132444 0 0 0-3.527111-10.24A29.013333 29.013333 0 0 0 271.928889 614.4c-4.096-1.365333-13.312-3.868444-27.648-7.395556A94.776889 94.776889 0 0 1 204.8 589.596444a44.487111 44.487111 0 0 1-15.701333-34.133333 43.235556 43.235556 0 0 1 7.395555-24.462222 45.511111 45.511111 0 0 1 21.276445-17.294222 85.674667 85.674667 0 0 1 34.133333-6.030223 72.476444 72.476444 0 0 1 48.469333 14.108445 49.265778 49.265778 0 0 1 17.066667 37.660444l-34.133333 1.592889a29.468444 29.468444 0 0 0-10.24-19.228444 34.133333 34.133333 0 0 0-21.845334-5.802667 39.708444 39.708444 0 0 0-23.552 6.257778 12.401778 12.401778 0 0 0-5.461333 10.581333 12.970667 12.970667 0 0 0 5.12 10.353778 88.291556 88.291556 0 0 0 31.744 11.377778 168.96 168.96 0 0 1 37.205333 12.288 47.672889 47.672889 0 0 1 19.000889 17.408 53.703111 53.703111 0 0 1-1.365333 54.727111zM504.035556 698.595556a80.782222 80.782222 0 0 1-14.791112-6.485334c-1.137778 0-8.760889-5.575111-22.755555-15.132444a92.387556 92.387556 0 0 1-37.205333 7.395555 81.806222 81.806222 0 0 1-61.781334-22.755555 90.112 90.112 0 0 1-22.755555-65.194667 90.112 90.112 0 0 1 22.755555-65.194667 80.213333 80.213333 0 0 1 60.757334-22.755555 79.644444 79.644444 0 0 1 60.416 22.755555 91.022222 91.022222 0 0 1 22.755555 65.194667 113.777778 113.777778 0 0 1-6.144 38.912A79.644444 79.644444 0 0 1 489.244444 659.911111a106.723556 106.723556 0 0 0 27.648 14.449778z m154.624-17.180445H538.282667V512h34.133333v140.629333h85.902222z" fill="#8D94E0" p-id="5564" /><path d="M427.349333 537.031111a43.918222 43.918222 0 0 0-34.133333 14.677333 65.308444 65.308444 0 0 0-13.084444 44.259556 66.673778 66.673778 0 0 0 13.084444 44.828444 42.666667 42.666667 0 0 0 33.223111 14.904889 41.301333 41.301333 0 0 0 14.108445-2.503111 98.190222 98.190222 0 0 0-21.276445-10.695111l9.671111-19.797333a120.718222 120.718222 0 0 1 32.540445 17.521778 50.744889 50.744889 0 0 0 9.898666-18.887112 86.698667 86.698667 0 0 0 3.413334-25.372444 65.422222 65.422222 0 0 0-13.084445-44.373333 44.032 44.032 0 0 0-34.360889-14.563556z" fill="#8D94E0" p-id="5565" /></svg>-->
        <!--              <p> 应用安装SQL文件 </p>-->
        <!--              <el-tag type="info">install.sql</el-tag>-->
        <!--            </el-card>-->
        <!--            <el-button v-if="!version.install_sql" type="danger" @click="dialogVisible = true">未设置</el-button>-->
        <!--            <el-button v-else type="primary" @click="dialogVisible = true">查看</el-button>-->
        <!--          </div>-->
        <!--          <div>-->
        <!--            <el-card shadow="hover" class="sql-upgrade">-->
        <!--              <svg t="1673620670364" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5562"><path d="M659.911111 102.4H204.8v394.24h52.337778v-341.333333h365.226666V367.502222h212.764445v501.76H257.137778V707.356444H204.8V921.6h682.666667V329.955556z m14.791111 212.764444V191.260444L798.606222 315.164444z" p-id="5563" /><path d="M136.533333 477.866667v250.311111h568.888889V477.866667z m177.720889 181.248a49.834667 49.834667 0 0 1-22.755555 19.114666 98.531556 98.531556 0 0 1-37.205334 6.257778 74.069333 74.069333 0 0 1-49.834666-15.018667A65.308444 65.308444 0 0 1 183.296 625.777778l34.133333-3.299556a40.504889 40.504889 0 0 0 12.288 24.917334 37.319111 37.319111 0 0 0 25.031111 7.850666 38.343111 38.343111 0 0 0 24.689778-6.712889 20.935111 20.935111 0 0 0 8.419556-16.497777 15.132444 15.132444 0 0 0-3.527111-10.24A29.013333 29.013333 0 0 0 271.928889 614.4c-4.096-1.365333-13.312-3.868444-27.648-7.395556A94.776889 94.776889 0 0 1 204.8 589.596444a44.487111 44.487111 0 0 1-15.701333-34.133333 43.235556 43.235556 0 0 1 7.395555-24.462222 45.511111 45.511111 0 0 1 21.276445-17.294222 85.674667 85.674667 0 0 1 34.133333-6.030223 72.476444 72.476444 0 0 1 48.469333 14.108445 49.265778 49.265778 0 0 1 17.066667 37.660444l-34.133333 1.592889a29.468444 29.468444 0 0 0-10.24-19.228444 34.133333 34.133333 0 0 0-21.845334-5.802667 39.708444 39.708444 0 0 0-23.552 6.257778 12.401778 12.401778 0 0 0-5.461333 10.581333 12.970667 12.970667 0 0 0 5.12 10.353778 88.291556 88.291556 0 0 0 31.744 11.377778 168.96 168.96 0 0 1 37.205333 12.288 47.672889 47.672889 0 0 1 19.000889 17.408 53.703111 53.703111 0 0 1-1.365333 54.727111zM504.035556 698.595556a80.782222 80.782222 0 0 1-14.791112-6.485334c-1.137778 0-8.760889-5.575111-22.755555-15.132444a92.387556 92.387556 0 0 1-37.205333 7.395555 81.806222 81.806222 0 0 1-61.781334-22.755555 90.112 90.112 0 0 1-22.755555-65.194667 90.112 90.112 0 0 1 22.755555-65.194667 80.213333 80.213333 0 0 1 60.757334-22.755555 79.644444 79.644444 0 0 1 60.416 22.755555 91.022222 91.022222 0 0 1 22.755555 65.194667 113.777778 113.777778 0 0 1-6.144 38.912A79.644444 79.644444 0 0 1 489.244444 659.911111a106.723556 106.723556 0 0 0 27.648 14.449778z m154.624-17.180445H538.282667V512h34.133333v140.629333h85.902222z" p-id="5564" /><path d="M427.349333 537.031111a43.918222 43.918222 0 0 0-34.133333 14.677333 65.308444 65.308444 0 0 0-13.084444 44.259556 66.673778 66.673778 0 0 0 13.084444 44.828444 42.666667 42.666667 0 0 0 33.223111 14.904889 41.301333 41.301333 0 0 0 14.108445-2.503111 98.190222 98.190222 0 0 0-21.276445-10.695111l9.671111-19.797333a120.718222 120.718222 0 0 1 32.540445 17.521778 50.744889 50.744889 0 0 0 9.898666-18.887112 86.698667 86.698667 0 0 0 3.413334-25.372444 65.422222 65.422222 0 0 0-13.084445-44.373333 44.032 44.032 0 0 0-34.360889-14.563556z" p-id="5565" /></svg>-->
        <!--              <p> 应用更新SQL文件 </p>-->
        <!--              <el-tag type="danger">upgrade.sql</el-tag>-->
        <!--            </el-card>-->
        <!--            <el-button v-if="!version.upgrade_sql" type="danger" @click="dialogVersionVisible = true">未设置</el-button>-->
        <!--            <el-button v-else type="primary" @click="dialogVersionVisible = true">查看</el-button>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
      <div v-if="active === 2">
        <comparison :aid="aid" :vid="vid" />
      </div>
      <div v-if="active === 3">
        <el-alert title="说明" description="当前没什么特殊配置项，直接提交即可" type="error" style="margin: 10px 0" />
        <!--        表单-->
        <el-form ref="form" :model="form" label-width="120px" label-position="left" style="width: 90%; margin: 0 auto">
          <!--是否覆盖数据库安装文件-->
          <el-form-item label="install.sql文件">
            <el-radio-group v-model="form.cover_install" disabled>
              <el-radio :value="1">覆盖</el-radio>
              <el-radio :value="0">不覆盖</el-radio>
            </el-radio-group>
            <p class="help">是否生成最新install.sql文件并覆盖</p>
          </el-form-item>
          <el-form-item label="upgrade.sql文件">
            <el-radio-group v-model="form.cover_upgrade" disabled>
              <el-radio :value="1">覆盖</el-radio>
              <el-radio :value="0">不覆盖</el-radio>
            </el-radio-group>
            <p class="help">是否生成最新upgrade.sql文件并覆盖</p>
          </el-form-item>
          <el-form-item label="Plugin.php文件">
            <el-checkbox-group v-model="form.config" disabled>
              <el-checkbox value="name" checked>应用名</el-checkbox>
              <el-checkbox value="author" checked>作者名</el-checkbox>
              <el-checkbox value="desc" checked>描述</el-checkbox>
              <el-checkbox value="version" checked>版本号</el-checkbox>
              <el-checkbox value="type" checked>类型</el-checkbox>
              <el-checkbox value="uninstall" checked>卸载方法</el-checkbox>
            </el-checkbox-group>
            <p class="help">选择更新Plugin.php里面的内容，选择后，将正则替换应用根目录中的plugin.php文件的配置项</p>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active === 4">
        <el-result icon="success" title="打包成功">
          <template #extra>
            <el-button type="primary" size="medium" @click="handleDown()">下载</el-button>
          </template>
          <template #sub-title>
            <p>请点击下方按钮下载应用包，并检查是否正确</p>
            <p class="u-m-t-10">打包日期：{{ pack.date }}</p>
          </template>
        </el-result>
      </div>
    </div>
    <div class="footer">
      <el-button v-if="active > 0 && active < 4" style="width: 200px" @click="active--">上一步</el-button>
      <el-button v-if="active < 3" type="primary" style="width: 200px" @click="next()">下一步</el-button>
      <el-button v-if="active === 3" type="primary" style="width: 200px" @click="handlePack()">提交</el-button>
    </div>
    <el-dialog v-model:visible="dialogVisible" title="应用创建数据表" width="1100px" top="10vh" append-to-body>
      <install-sql :vid="vid" @success="getVersionMsg(0)" />
    </el-dialog>
    <el-dialog v-model:visible="dialogVersionVisible" title="版本对比" width="1100px" top="10vh" append-to-body>
      <comparison :aid="aid" :vid="vid" />
    </el-dialog>
  </div>
</template>

<script>
import { pack, show } from '@/api/addons/version'
import Comparison from '@/views/addons/version/components/Comparison.vue'
import InstallSql from '@/views/addons/version/components/InstallSql.vue'

export default {
  name: 'Pack',
  components: { InstallSql, Comparison },
  props: {
    aid: {
      default: 0,
      type: [Number, String]
    },
    vid: {
      default: 0,
      type: [Number, String]
    }
  },
  data() {
    return {
      form: {
        cover_install: 1,
        cover_upgrade: 1,
        upgrade_merge: 1,
        config: []
      },
      active: 0,
      dialogVisible: false,
      dialogVersionVisible: false,
      version: {
        addon: {}
      },
      pack: {},
      down_url: ''
    }
  },
  computed: {},
  mounted() {
    this.getVersionMsg()
  },
  methods: {
    next() {
      if (this.active === 1) {
        if (!this.version.install_sql) {
          this.$message.info('请先设置install.sql')
          return
        }
      }
      if (this.active === 2) {
        if (!this.version.upgrade_sql) {
          this.$message.info('当前未设置upgrade.sql')
        }
      }
      this.active++
    },
    showPackLog() {
      this.pack = this.version.pack
      this.down_url = this.version.pack_url
      this.active = 4
    },
    getVersionMsg(msg = 1) {
      show(this.vid).then((res) => {
        this.version = res.data
        if (this.version.pack && msg) {
          this.$msgbox({
            title: '提示',
            message: '该版本已经打包过，是否查看？',
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                this.showPackLog()
                done()
              } else {
                done()
              }
            }
          }).catch((res) => {})
        }
      })
    },
    handlePack() {
      pack(this.vid, this.form).then((res) => {
        this.pack = res.data.pack
        this.down_url = res.data.url
        this.active = 4
        this.$message.success('打包成功')
      })
    },
    handleDown() {
      if (this.down_url) {
        window.open(this.down_url)
      } else {
        this.$message.error('下载地址不存在')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.pack-sql {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  margin-top: 20px;

  p {
    padding: 10px;
    font-size: 16px;
  }

  .el-icon-coin {
    font-size: 100px;
    color: #409eff;
  }

  .sql-upgrade {
    width: 200px;

    svg {
      fill: #f94747;
    }
  }

  .sql-install {
    width: 200px;

    svg {
      fill: #46b8da;
    }
  }

  svg {
    width: 60%;
  }
}

.help {
  color: #909399;
  font-size: 12px;
}

.footer {
  text-align: center;
  margin-top: 20px;
}
</style>
